<template>
	<!-- 首页-消息 -->
	<view class="news">
		<!-- <u-navbar back-icon-color="#000000" title="消息" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<u-navbar back-text="消息"  :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- 消息列表 -->
		<mescroll-body top="0" :down="downOption" :height="comHeight" :up="upOption" ref="mescrollRef" @init="mescrollInit" @down="downCallback">
			<view>
				<!-- <view v-if="!isShow"> -->
				<view>
					<view style="padding-top: 32rpx;" v-for="(item,index) in recordsList" :key="index" :data-id="item.messageId" @tap="jumpToSystemMessage(index,item.messageId,item.redirectId,item.redirectType)">
						<view :class="item.readFlag? 'tables':'table'" style="margin-top: 15rpx;padding: 18rpx 20rpx;">
							<view style="display: flex;justify-content: space-between;">
								<view style="width: 15%;"></view>
								<view class="typeface1" style="text-align: center;width: 50%;">{{item.createTime}}</view>
								<view style="width: 15%;">
									<image src="../../../static/icon/new.png" mode="" style="width: 78rpx;height: 29rpx;" v-if="item.readFlag==false"></image>
								</view>
							</view>
							<view class="titleText">{{item.title}}</view>
							<view class="typeface2">
								{{item.content}}
							</view>
						</view>
					</view>
				<!-- 	<view style="padding-top: 32rpx;" @click="afterMarket()">
						<view class="table" style="margin-top: 15rpx;padding:18rpx 24rpx 28rpx 20rpx;">
							<view class="typeface1">2021-1-12   19:29:35</view>
							<view class="names">
								<view class="save">
									<image src="../../../static/icon/shangjia.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
									<view class="titleText">商家操作发送的消息</view>
								</view>
								<view  class="save">
									<image src="../../../static/icon/chaoshi.png" mode="" style="width: 26rpx;height: 26rpx;"></image>
									<view class="titleText">已超时</view>
								</view>
							</view>
							<view class="typeface2">
								<view style="width: 538rpx;">您的日常保洁订单123456789已有商家接单，请在2小时内确认并支付</view>
								<image src="https://beedao.oss-cn-beijing.aliyuncs.com/ddb54f7447434d969c7a73c0926ae190.png" mode="" style="width: 20rpx;height: 24rpx;"></image>
							</view>
						</view>
					</view> -->
					<!-- <view style="padding-top: 32rpx;">
						<view class="table" style="margin-top: 15rpx;padding:18rpx 24rpx 28rpx 20rpx;">
							<view class="typeface1">2021-1-12   19:29:35</view>
							<view class="names">
								<view  class="save">
									<image src="../../../static/icon/pinga.png" mode="" style="width: 24rpx;height: 24rpx;"></image>
									<view class="titleText">商家已接单，快去支付吧~</view>
								</view>
								<view  class="save">
									<image src="../../../static/icon/qzhif.png" mode="" style="width: 26rpx;height: 26rpx;"></image>
									<view class="titleText" style="color: #F29423;margin-right: 18rpx;">去支付</view>
									<image src="https://beedao.oss-cn-beijing.aliyuncs.com/7f5a02ba1da64754b09cfd4deec3a633.png" mode="" style="width: 20rpx;height: 24rpx;"></image>
								</view>
							</view>
							<view class="typeface2">
								<view style="width: 538rpx;">您的日常保洁订单123456789已有商家接单，请在2小时内确认并支付</view>
							</view>
						</view>
					</view> -->
				</view>

				<view style="margin: 40rpx 0;">
					<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{prompt}}</u-divider>
				</view>
			</view>

			<!-- <view v-if="isShow" style="margin-top: 100rpx;text-align: center;">
				<image src="../../../static/img/1-35.png" style="width: 450rpx;height: 450rpx;"></image>
				<view class="typeface3">暂无数据</view>
			</view> -->
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textStyle: {
					color: '#272755'
				},
				isShow: false,
				pageSize: 10,
				page: 1,
				totolPage: 2,
				recordsList: [],
				// msgId: '',
				downOption: {
					use: true,
					auto: false,
					offset: 40
				},
				upOption: {
					use: false
				},
				mescroll: null,
				prompt: '没有更多了',
				comHeight:0
			}
		},
		onReachBottom() {
			if (this.totolPage <= this.page) {
				return false;
			} else {
				this.page += 1;
				this.getMessage();
			}
		},
		onLoad() {
			var that = this;
			var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				width,
				height,
				right
			} = menuButtonInfo;
			uni.getSystemInfo({
				success: res => {
					const {
						statusBarHeight
					} = res;
					const margin = top - statusBarHeight;
					var navHeight = height + statusBarHeight + margin * 4;
					that.comHeight = (res.windowHeight  - navHeight) + 'px';
				}
			});
			that.page = 1,
			that.recordsList = [];
			that.prompt = '加载中....';
			that.getMessage();
		},

		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新回调函数
			downCallback() {
				setTimeout(() => {
					this.page = 1,
					this.recordsList = [];
					// this.prompt = '加载中....';
					this.getMessage();
					this.mescroll.endSuccess();
				}, 500)
			},
			getMessage() {
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'message/latest'
				};
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let data = {
					page: this.page,
					pageSize: this.pageSize,
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					//打印请求返回的数据  
					uni.hideLoading();
					if (res.code == "200") {
						if (res.data.records.length > 0 || this.page != 1) {
							this.isShow = false;
							this.totolPage = res.data.pages;
							if (res.data.current * res.data.size < res.data.total) {
								for (const key in res.data.records) {
									this.recordsList.push(res.data.records[key]);
								}
								this.prompt = '加载中....';
							} else {
								for (const key in res.data.records) {
									this.recordsList.push(res.data.records[key]);
								}
								this.prompt = '没有更多了';
							}
						} else {
							this.prompt = '没有更多了';
							this.isShow = true;
						}
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}

				});
			},
			jumpToSystemMessage(index,messageId,redirectId,type) {
				let opts = {
					way: true, 
					method: 'post',
					url: 'message/update'
				};
				let data = {
					messageId: messageId
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if (res.message == "成功") {
						this.recordsList[index].readFlag=true;
						// 1按次2套餐3按月
						if(type==1){
							uni.navigateTo({
								url:'../../order/orderDetail?orderId='+ redirectId
							});
						}else if(type == 2){
							uni.navigateTo({
								url:'../../order/orderDetail?orderId='+ redirectId
							});
						}else{
							uni.navigateTo({
								url:'../../order/orderDetail_one?orderId='+ redirectId
							});	
						}
						// this.getMessage()
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				});
				
			},
			afterMarket(){
				uni.navigateTo({
					url:'../../order/afterMarket'
				})
			}
		}
	}
</script>

<style>
	.news{
		height: calc(100vh - var(--status-bar-height));
	}
	.typeface1 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		opacity: 1;
		text-align: center;
	}

	.typeface3 {
		margin-top: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666666;
		opacity: 1;
	}

	.table {
		width: 670rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 20rpx;
		margin-left: 40rpx;
	}

	.titleText {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #7E7E7E;
		opacity: 1;
		/* margin-left: 12rpx; */
		padding-bottom: 14rpx;
		margin-top: 28rpx;
		border-bottom: 2rpx solid #E4E4E4;
	}

	.typeface2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #A8A8A8;
		opacity: 1;
		margin-top: 12rpx;
		display: flex;align-items: center;justify-content: space-between;
	}

	.tables {
		width: 670rpx;
		background: #EEEEEE;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		margin-left: 40rpx;
		border-radius: 20rpx;
	}
	.names{
		display: flex;justify-content: space-between;border-bottom: 1px solid #E4E4E4;
	}
	.save{
		display: flex;align-items: center;padding: 28rpx 0rpx 14rpx 0;
	}
</style>
